<template>
  <div class="login-main">
    <div class="goback" @click="goback"></div>
    <el-form
        :label-position="labelPosition"
        label-width="20vw"
        :model="formLabelAlign"
        style="width: 65%;margin-top: 85vw"
    >
      <el-form-item label="电话：">
        <el-input v-model="formLabelAlign.username"></el-input>
      </el-form-item>
      <el-form-item label="密码：">
        <el-input type="password" v-model="formLabelAlign.password"></el-input>
      </el-form-item>
    </el-form>
    <div class="login-button">
      <div class="createAccount" @click="toCreateAccount"></div>
      <div class="login-item" @click="login"  v-loading.fullscreen.lock="fullscreenLoading"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return{
      labelPosition: 'right',
      fullscreenLoading: false,
      formLabelAlign: {
        username: 'illusion',
        password: '103529',
        // username: '',
        // password: '',
        rememberMe: false,
      },
    }
  },
  created() {
    this.$parent.logining=true;
  },
  methods:{
    goback(){
      this.$parent.logining=false;
      this.$router.go(-1);
    },
     async login(){
      this.fullscreenLoading = true;
       setTimeout(() => {
         this.fullscreenLoading = false;
         // this.message.error('登录失败,请重试!')
       }, 2000);
      const { data: res } = await this.$http.post('login',this.formLabelAlign)
      console.log(res)
      if (res.code != 0) {
        this.$message.error(res.msg)
        return
        // this.fullscreenLoading = false
      }
      // console.log('登录成功');
      this.$message.success('登录成功!')
      // 1、 保存登录成功后的token，=>sessionStorage中
      // 1a 除了登录之外的api接口，必须在登录之后才能访问
      // 1b token只在当前网站打开期间生效，所以token保存在=>sessionStorage中
      // console.log(res.data.token)
      window.sessionStorage.setItem('nickname', res.data.name)
      window.sessionStorage.setItem('id', res.data.id)
      window.sessionStorage.setItem('username', this.formLabelAlign.username)
      window.sessionStorage.setItem('password', this.formLabelAlign.password)
      this.$parent.logining=false;
      this.$parent.loginStatus = true
      this.$parent.identity = res.data.role
      this.$router.go(-1);
    },
    toCreateAccount(){
      this.$parent.logining=false;
      this.$router.push("/createAccount");
    }
  }
}
</script>

<style scoped>
.login-main{
  width: 100vw;
  height: 180vw;
  overflow: hidden;
  background-image: url("../assets/login.png");
  background-size: 100vw 220vw;
}

.goback{
  margin-top: 10px;
  width: 100px;
  height: 100px;
  /*background-color: #8cc0ff;*/
  border-radius: 50%;
}

.login-button{
  background-image: url("../assets/login2.png");
  float: left;
  /*margin: 5px 0 0;*/
  /*margin-left: 64vw;*/
  background-size: 100vw 39vw;
  width: 100vw;
  height: 200px;
  overflow: inherit;
}

.createAccount{
  float: left;
  margin-top: 6vw;
  margin-left: 6vw;
  width: 27vw;
  height: 18vw;
  /*border-radius: 50%;*/
  /*background-color: #8cc0ff;*/
}
.login-item{
  float: right;
  margin-top: 2vw;
  margin-right: 12vw;
  width: 24vw;
  height: 24vw;
  border-radius: 50%;
  /*background-color: #8cc0ff;*/
}
</style>
